<template>
  <a-spin :spinning="confirmLoading">
    <div class="info">
      <div>
        <p>报修单号</p>
        <p>{{ this.model.faultRepairNo }}</p>
      </div>
      <div>
        <p>报修名称</p>
        <p>{{ this.model.faultRepairName }}</p>
      </div>
      <div>
        <p>故障等级</p>
        <p>{{ this.model.faultRepairLevelId_dictText }}</p>
      </div>
      <div>
        <p>故障时间</p>
        <p>{{ this.model.faultRepairTime }}</p>
      </div>
      <div>
        <p>报修人</p>
        <p>{{ this.model.createBy_dictText }}</p>
      </div>
      <div>
        <p>提报时间</p>
        <p>{{ this.model.createTime }}</p>
      </div>
    </div>
    <j-form-container :disabled="formDisabled" style="padding:5px;">
      <a-form-model :model="model" slot="detail" style="padding-top:10px;">
        <p style="color:#000;">报修图片</p>
        <j-image-upload
          v-if="this.model.faultRepairImages"
          isMultiple
          v-model="model.faultRepairImages"
        ></j-image-upload>
        <span v-if="!this.model.faultRepairImages">暂无</span>
        <p style="color:#000;margin-top: 10px;">报修描述</p>
        <span>{{ this.model.faultRepairRemarks ? this.model.faultRepairRemarks : '暂无' }}</span>
      </a-form-model>
    </j-form-container>
    <j-form-container style="margin-top:10px;" :disabled="formDisabled" >
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div style="border-left:3px solid RGB(0,92,230);padding-left:8px;color:#000;margin: 10px 0px;">
          <span>审核派工</span>
        </div>
        <div style="display: flex;justify-content: space-between;">
          <div style="width:48%;">
            <p style="margin:0px;"><span style="color:red;">*</span>&nbsp;故障维修人员</p>
            <a-form-model-item prop="faultRepairUserId">
              <j-select-user-by-dep v-model="model.faultRepairUserId" :multi="false" />
            </a-form-model-item>
          </div>
          <div style="width:48%;">
            <p style="margin:0px;"><span style="color:red;">*</span>&nbsp;处理开始时间</p>
            <a-form-model-item prop="faultRepairTimeBegin">
              <j-date
                placeholder="请选择处理开始时间"
                v-model="model.faultRepairTimeBegin"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-model-item>
          </div>
          <div style="width:48%;">
            <p style="margin:0px;"><span style="color:red;">*</span>&nbsp;处理截至时间</p>
            <a-form-model-item prop="faultRepairTimeEnd">
              <j-date
                placeholder="请选择处理截至时间"
                v-model="model.faultRepairTimeEnd"
                :show-time="true"
                date-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-model-item>
          </div>
        </div>
        <p style="margin:0px;">审核意见</p>
        <a-form-model-item prop="checkRemarks">
          <a-textarea v-model="model.checkRemarks" rows="2" placeholder="请输入审批意见" />
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'EneFaultRepairCheckForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        faultRepairUserId: [{ required: false, message: '请输入故障维修人员!' }],
        faultRepairTimeEnd: [{ required: false, message: '请输入处理截至时间!' }],
        faultRepairTimeBegin: [{ required: false, message: '请输入处理开始时间!' }]
      },
      url: {
        //add: "/repair/eneFaultRepair/add",
        edit: '/repair/eneFaultRepair/check',
        queryById: '/repair/eneFaultRepair/queryById'
      }
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    detailinfo(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm(state) {
      const that = this
      if (state === 1) {
        if (!this.model.faultRepairUserId) {
          this.$message.info('请选择维修人员')
          return
        }
        if (!this.model.faultRepairTimeEnd) {
          this.$message.info('请选择处理时间')
          return
        }
      } else {
        if (!this.model.checkRemarks) {
          this.$message.info('请填写审核意见')
          return
        }
      }
      const beginTime = new Date(this.model.faultRepairTimeBegin);
      const endTime = new Date(this.model.faultRepairTimeEnd);
      if(beginTime>=endTime){
        this.$message.warning('处理截至时间不能小于处理开始时间')
        return
      }
      console.log("结果", beginTime>=endTime);
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.edit
          method = 'put'
          httpAction(httpurl + '?checkState=' + state, this.model, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.ant-form-item {
  margin-bottom: 5px !important;
}
.info {
  display: flex;
  background-color: RGB(244, 244, 244);
  justify-content: space-around;
  padding: 15px 5px;

  p:nth-child(2) {
    margin: 0px !important;
    color: #000;
  }
}
</style>
